<template>
  <div class="date-picker--clear" :style="{'visibility': visible == 'none'?'hidden':''}">
        <span class="date-picker--clear-button datepicker-iconfont"
              @click.capture.stop.prevent="$emit('clear')"
              @mouseup.stop.prevent @mousedown.stop.prevent>
              <i class="el-icon-circle-close" style="font-size: 0.8rem;"></i>
        </span>
  </div>
</template>

<script>
export default {
  name: 'ClearButton',
  data (){
    return {
      visible: 'none'
    }
  },
  methods:{
    show(){
      this.visible = ''
    },
    hide(){
      this.visible = 'none'
    }
  }
}
</script>
